<template>
  <div class="LoadDevicebox">
    <div class="leftbox">
      <el-input
        placeholder="输入关键字进行过滤"
        size="small"
        style="margin-bottom: 10px;"
        v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="data"
        node-key="id"
        :highlight-current="true"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree">
      </el-tree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <el-form ref="form" label-position="left" label-width="60px">
            <el-row :gutter="20">
                <el-col :span="6" style="display: flex;margin-top: 4px;">
                  <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                  </el-radio-group>
                  <el-date-picker v-if="radio3=='1'" v-model="value1" size="small" type="date"
                   value-format="yyyy-MM-dd" placeholder="选择日" style="flex: 1;"></el-date-picker>
                  <el-date-picker v-else v-model="value2" size="small" value-format="yyyy-MM"
                    type="month" placeholder="选择月" style="flex: 1;"></el-date-picker>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="配电室">
                    <el-select v-model="switchroomId" filterable   size="small" >
                      <el-option v-for="(item,index) in peidianlist" :key="index" :label="item.name" :value="item.id" placeholder="请选择配电室" class="dengji"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="13" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button type="primary" size="small" @click="submit">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="rightbody">
        <div class="title">
          <div>设备负荷排名</div>
          <div class="butexp">
            <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="danxuan">
          <el-radio-group v-model="radio" @change="gettubiaolist">
            <el-radio label="1">实时功率</el-radio>
            <el-radio label="2">平均负荷</el-radio>
            <el-radio label="3">最高负荷</el-radio>
          </el-radio-group>
        </div>
        <div class="tableandech">
          <div class="echart" ref="paiming"></div>
          <div class="echart">
            <TableColumn :issize="issize" :tableConfig="tableConfig"
            :tableData="tableData" ref="tablecolumn"></TableColumn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableColumn from '@/components/Table'
import * as echarts from 'echarts';
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import {geipeidiansapi,getdevicepaimingapi,getdevicelistapi} from '@/api/keynote'
import { getuserlistapi } from '@/api/analysis'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      issize: 'medium',
      filterText: '',
      data: [],
      peidianlist:[],
      value1:'',
      value2:'',
      radio3: '1',
      radio:'1',
      switchroomId:'',
      defaultProps: {
        label:'bizOrgName'
      },
      tableData:[],
      tableConfig:[
        { label: '设备', prop: 'equipName',width: '170'},
        { label: '时间', prop: 'dateTime' ,width: '150' ,center:'center'},
        { label: '实时功率', prop: 'realPowerValue',center:'right'},
        { label: '实时负荷排名', prop: 'realPowerRank',center:'right'},
        { label: '日平均负荷', prop: 'averagePowerValue',center:'right'},
        { label: '日平均负荷排名', prop: 'averagePowerRank',center:'right'},
        { label: '日最高负荷', prop: 'highestPowerValue',center:'right'},
        { label: '日最高负荷发生时间', prop: 'highestPowerTime',width: '160'},
        { label: '日最高负荷排名', prop: 'highestPowerRank',center:'right'},
      ]
    };
  },

  async mounted() {
    const { data: { list } } =await getuserlistapi()
    this.data = list
    this.handleNodeClick(list[0])
    setTimeout(() => this.$refs.tree.setCurrentKey(list[0].id), 200)
    this.gettime()
  },

  methods: {
    // 树节点点击
    async handleNodeClick(val){
      const { data: { list } } = await geipeidiansapi({ orgNo: val.bizOrgNo })
      this.peidianlist = list
      this.$set(this,'switchroomId',list[0]?list[0].id:'')
      if(this.switchroomId){
        this.submit()
      } else {
        this.tableData=[]
        this.getecharts([])
      }
    },
    // 查询
    submit() {
      if(!this.switchroomId) return this.$message.warning('请先选中配电室')
      this.gettubiaolist()
      this.gettable()
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 获取表格数据
    async gettable(){
      this.$refs.tablecolumn.loadind=true
      const { data: { list } } = await getdevicelistapi({
        classId:this.switchroomId,dateTime:this.radio3=='1'?this.value1:this.value2,
        dateType:this.radio3,
      })
      this.tableData=list
      this.$refs.tablecolumn.loadind=false
    },
    // 获取图表数据
    async gettubiaolist(){
      if(!this.switchroomId) return this.$message.warning('请先选择配电室')
      const { data: { list } } = await getdevicepaimingapi({
        classId:this.switchroomId,dateTime:this.radio3=='1'?this.value1:this.value2,
        dateType:this.radio3,statisticsType:this.radio
      })
      const array=list.reverse()
      this.getecharts(array)
    },
    //获取图表
    async getecharts(list) {
      var chartDom = this.$refs.paiming
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      option = {
        color:['#5087ec'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          // inverse:true,
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data:list.map(ele=>ele.equipName)
        },
        series: [
          {
            name: this.radio=='1'?'实时功率':this.radio=='2'?'平均负荷':'最高负荷',
            type: 'bar',
            data: list.map(ele=>ele.value),
            label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                      color: '#5087ec' // 设置数值的颜色为红色
                  }
              }
          }
        ]
      }
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        //图表响应处理
        myChart.resize();
      });
      loading.close()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('pio-microservice-biz/pio/equip/load/rank/exportExcel',{
        classId:this.switchroomId,dateTime:this.radio3=='1'?this.value1:this.value2,
        dateType:this.radio3,
      },'设备负荷排名')
    },
    // 刷新列表
    shuaxin() {
      this.submit()
      this.$message.success('列表刷新成功')
    },
    // 重置
    chongzhi(){
      this.radio3='1'
      this.radio='1'
      this.gettime()
      this.$set(this,'switchroomId',this.peidianlist[0]?this.peidianlist[0].id:'')
      this.submit()
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1 = year + '-' + month + '-' + day
      this.value2 = year + '-' + month
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
};
</script>

<style scoped>
.LoadDevicebox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    background-color: #fff;
  }
  .rightbox{
    width: calc(100% - 310px);
    margin-left: 10px;
    .righttop{
      height: 80px;
      padding:20px;
      margin-bottom: 10px;
      background-color: #fff;
    }
    .rightbody{
      height: calc(100% - 90px);
      padding: 20px;
      background-color: #fff;
      .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .tableandech{
        height: 92%;
        .echart{
          height: 50%;
        }
      }
    }
  }
}
</style>